<template>
  <div class="about-wrap">
    <Divider />
     <!-- 资产价值 -->
    <a-row class="tw-mt-20 tw-pb-10 tw-justify-center">
      <a-col
        v-for="(item, index) in items"
        :key="index"
        :xs="{ span: 20, offset: 2 }"
        :md="{ span: 7, offset: 3 }"
        :lg="{ span: 7, offset: 3 }"
        :xxl="{ span: 6, offset: 0 }"
        class="tw-mb-5 tw-mr-20  tw-font-bold">
        <div class="image-wrap">
          <img :src="item.image" class="magic tw-inline tw-w-full tw-h-full tw-object-contain">
        </div>
        <div class="tw-mt-4 tw-text-b-primary tw-text-center tw-text-4xl">{{ item.title }}</div>
        <div
          class="text-wrap tw-m-auto tw-mt-5  tw-text-b-secondary tw-text-xl"
          v-html="item.text" />
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import x1 from '@/assets/about-1.png'
import x2 from '@/assets/about-2.png'


const items = [
  {
    image: x1,
    title: `Rights and Benefits`,
    text: `
      <div><i class="icon-jiantou"></i>&nbsp; Guild members reward airdrops</div>
      <div><i class="icon-jiantou"></i>&nbsp; Pledge the in-game yield</div>
      <div><i class="icon-jiantou"></i>&nbsp; Project gain sharing</div>
      <div>Some of the rewards above are permanent, and most importantly, they're risk-free.</div>
    `
  },
  {
    image: x2,
    title: `Management Power`,
    text: `The owners of SANFTare guild members. You may be part of the Supreme Governance Committee of the Stone Aeon, and will receive guild governance rewards regularly.`
  }
]

</script>

<style lang="less" scoped>
  .image-wrap {
    height: 300px;
  }
  .about-wrap {
    background-image: url("@/assets/bg.png");
    background-repeat: repeat;
  }
</style>